// Operations with DOM

selectedDiv.innerHTML = "value";

selectedDiv.style.background = "#123";
var div = document.createElement("div");

<ul id="list"></ul>
var list = document.getElementById('list');
list.innerHTML += "<li class='list-item'>" + someValue + "</li>";

element.parentNode // родителят на element

element.childNodes // всички наследници

list.removeChild(list.childNodes[i]); // изтриване на наследници

list.childNodes.nodetype == 3; // text node

var child = list.firstChild;
list.lastChild
list.firstElementChild // прескача textNode
list.lastElementChild

child.nextElementSibling
child.nextSibling

var studentsList = document.createElement('ul');
var studentLi = document.createElement('li');
studentsList.appendChild(studentLi);
document.body(appendChild(studentsList);

var list = document.getElementById('list');
for (var i = 0; i < 15; i++)
{
	var item = document.createElement('li');
	var title = document.createElement('strong');
	
	title.innerHTML('Item #' + i);
	
	item.appendChild(title);
	list.appendChild(item); // append е много бавна операция, защото всеки път се презарежда целия DOM
	// ше добавим всички strong елементи като li елементи в 'list'
}

item.id = "item-it";

var fifthItem = document.getElementById('list-item-5');
list.removeChild(fifthItem);
fifthItem.parentNode.removeChild(fifthItem); // Правилният начин за изтриване на елеменет

// delete all children of list
while (list.lastChild)
{
	list.removeChild(list.lastChild);
}

function alteringElements() // прехвърляне на елементи от едно място на друго
{
	var leftList = document.getElementById('left');
	var rightList = document.getElementById('right');
	
	leftList.addEventListener(
		'click',
		function(ev)
		{
			var target = ev.target;
			if(!(target instanceof HTMLLIElement))
			{
				return;
			}
			
			rightList.appendChild(target);
		}
}

div.style.width = "123px";


function createDropDown(selector, items)
{
	var container = document.querySelector(selector);
	// strong selected item
	var selectedItem = document.createElement('strong');
	selectedItem.innerHTML = 'not selected';
	
	selectedItem.addEventListener(
		'click',
		function()
		{
			if (itemsList.style.display === 'none')
			{
				itemsList.style.display = ''; // ще наследи стила
			}
			else
			{
				itemsList.style.display = 'none';
			}
		});
	
	// list of items
	var itemsList = document.createElement
	itemsList.style.display = "none";
	
	for (var i = 0; i < items.length; i++)
	{
		var item = document.createElement('li');
		item.innerHTML = items[i];
		itemsList.appendChild(item);
	}
	
	container.appendChild(selectedIndex);
	container.appendChild(itemsList);
}

var items = ['Apples', 'Oranges', 'Bananas', 'Peaches', 'Plumes'];
createDropDown('#dropdown', items);

// Optimizations

// по възможност да добавяме няколко елемента наведнъж, а не поотделно
DocumentFragment // е елемент, чрез който можем да съберем няколко елемента и да ги добавим едновременно чрез него
dFrag = document.createDocumentFragment();
dFrag.appendChild(div);
document.body.appendChild(dFrag);

function usingDocFragment()
{
	var list = document.getElementById('list');
	var listFragment = document.createDocumentFragment();

	for(var i = 0; i < 15; i++)
	{
		var item = document.createElement('li');
		item.innerHTML = 'Item # ' + i;
		
		listFragment.appendChild(item);
	}

	list.appendChild(listFragment); // добавят се само неговите наследници
}

function fasterElementsCreation()
{
	var list = document.getElementById('list'),
		count = 15,
		listFragment = document.createDocumentFragment('div');
	var itemTemplate = document.createElement('li');
	itemTemplate.className = 'list-item';
	var titleTemplate = document.createElement('strong');
	
	titleTemplate.class = 'item-title';
	itemTemplate.appendChid(titleTemplate);
	
	for(var i = 0; i < count; i++)
	{
		titleTemplate.innerHTML = 'Item #' + i;
		itemTemplate.setAttribute('data-id', i);
		listFragment.appendChild(itemTemplate.cloneNode(true));
	}
}